
<template>
	<view class="cu-card article bg-white radius plr-32 pt32 pb32" :class="card?'':'no-card'" v-if="shopInfo">
		<view class="shop-name " @click="toShopHome(shopInfo.id)">
			<text class="text-sm text-bold margin-left-xs">{{shopInfo.name}}</text>
		</view>
		<view class="flex shop-detail margin-tb-xs align-center">
			<image :src="shopInfo.imgUrl" mode="aspectFit"></image>
			<view class="text-gray">
				<view class=" location ml32 overflow-2">
					<text class="f24">地址:</text>
					<text class="address text-sm margin-left-xs">{{shopInfo.address}}</text>
				</view>
				<view class=" mobile ml32 margin-top-xs" :hover-stop-propagation="true"
					@click="callPhone(shopInfo.phone)">
					<text class="f24">电话:</text>
					<text class="phone text-sm margin-left-xs">{{shopInfo.phone}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},

		components: {},
		props: {
			shopInfo: {
				type: Object,
				default: () => ({})
			},
			card: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			//跳转到商铺首页
			toShopHome(id) {
				uni.navigateTo({
					url: '/pages/shop/shop-detail/index?id=' + id
				});
			},

			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	};
</script>
<style>
	.shop-detail image {
		width: 120rpx !important;
		height: 120rpx !important;
	}

	.location {
		width: 520rpx;
	}
</style>
